<template>
    <ul class="todo-list">
        <li  :class="{ completed: item.done }"  v-for="item in counter.list">
            <div class="view">
                <input class="toggle" type="checkbox" :checked="item.done" @change="counter.changeDone(item.id)" />
                <label :class="{ lables: item.done }">{{item.name}}</label>
                <button class="destroy"  @click="counter.delCounter(item.id)"></button>
            </div>
            <input class="edit" value="Create a TodoMVC template" />
        </li>
    </ul>
</template>

<script setup>
import todos from '../store/continue.js'
const counter = todos()
</script>
<style>
@import url('../style/app.css');
</style>